<template>
  <maincontainer>
    <n-grid x-gap="12" :cols="1">
      <n-gi>
        <mycard title="服务器状态">
          <div class="w-full flex justify-evenly items-center my-3">
            <div class="w-1/5 h-full juzhong1 flex-col">
              <h1 class="w-full text-center">
                CPU使用情况
              </h1>
              <n-progress type="circle" :percentage="50"/>
            </div>
            <div class="w-1/5 h-full juzhong1 flex-col">
              <h1 class="w-full text-center">
                内存使用率
              </h1>
              <n-progress type="circle" :percentage="50"/>
            </div>
            <div class="w-1/5 h-full juzhong1 flex-col">
              <h1 class="w-full text-center">
                服务器系统存储空间
              </h1>
              <n-progress type="circle" :percentage="50"/>
            </div>
            <div class="w-1/5 h-full juzhong1 flex-col">
              <h1 class="w-full text-center">
                网盘默认存储空间
              </h1>
              <n-progress type="circle" :percentage="50"/>
            </div>
          </div>
        </mycard>
        <mycard title="服务器信息">
          <descriptions :infoList="serverinfoList" :column="4"></descriptions>
        </mycard>
        <mycard title="我的信息">
          <descriptions :infoList="myinfoList" ></descriptions>
        </mycard>
      </n-gi>
    </n-grid>
  </maincontainer>
</template>

<script setup name="Monitorflat" lang="ts">
import {useRoute, useRouter} from "vue-router";
import {inject, ref} from "vue"

const router = useRouter()
const route = useRoute()

const serverinfoList = ref([
  {label: "服务器名称", key: "", value: ""},
  {label: "服务器系统", key: "", value: ""},
  {label: "服务器软件", key: "", value: ""},
  {label: "网站路径", key: "", value: ""},
  {label: "服务器IP", key: "", value: ""},
  {label: "PHP版本", key: "", value: ""},
  {label: "服务器时间", key: "", value: ""},
  {label: "持续运行时间", key: "", value: ""},
  {label: "服务器名", key: "", value: ""},
])
const myinfoList=ref([
  {label: "我的IP", key: "", value: ""},
  {label: "我的浏览器UA", key: "", value: ""},
  {label: "我的浏览器语言", key: "", value: ""},
])
const zhucefunc:Function|undefined = inject("zhuceshuaxinfunc")
// 初始化函数
const init = () => {
}

// 初始化区域
init()
zhucefunc && zhucefunc({[route.name!.toString()]:init})
</script>

<style scoped>

</style>